<template>
	<view class="container">
		<chat-page-container :toId="options.user_id" @confirm="confirmMsg" ref="chatPageContainer" @scrollToBottom="scrollToBottom" @openLog="openLog" @tapPopupItem="tapPopupItem" :menuList="menuList" :menuPos="menuPos">
			<u-navbar :title="navBarTitle || '聊天'" :background="navBarBackground" :border-bottom="false" title-color="#fff" back-icon-color="#fff"></u-navbar>
			<scroll-view class="chat-scroll" scroll-y="true" @scroll="onScroll" :scroll-top="scrollTop">
				<view class="chat-log-list" id="chatLogList">
					<view class="" v-for="(message, index) in logList || []" :key="message.content.randstr" @>
						<!--  -->
						<chat-message-item ref="chatMessageItem" :sort="index" :message="message" @press="onPress"></chat-message-item>
					</view>
				</view>
			</scroll-view>
		</chat-page-container>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import moment from '@/utils/Moment.js';
import { SingleMessageItem } from '@/entity/SingleMessageItem.class.js';
import { getSingleSessionList } from '@/store/dispatches.js';

import chatMessageItem from '../components/chat/chat-message-item.vue';
import chatPageContainer from '../components/chat/chat-page-container.vue';
import ChatMixin from '@/mixins/chat-mixins.js';
// const messageManager = new MessageManager();
export default {
	name: 'chat-page',
	mixins: [ChatMixin],
	components: { chatMessageItem, chatPageContainer },
	data() {
		return {
			nonce_str: ''
		};
	},
	onLoad(options) {
		this.options = options;
		this.messageManager.clear();
		this.getSingleChatLog();
		uni.$on('chatMessage', this.getChatMessage);
		this.messageManager.addHandle(this.setRead);
	},
	onShow() {
		this.setRead();
		this.getMemberDetail();
	},
	onHide() {
		this.setRead();
	},
	onUnload() {
		uni.$off('chatMessage', this.getChatMessage);
	},
	methods: {
		getMemberDetail() {
			this.$u.api.getOtherUserDetail(this.options.user_id).then(res => {
				const { info } = res.data;
				this.navBarTitle = info.nickName;
			});
		},
		confirmMsg(data) {
			this.sendMsgHandle(data.msg);
		},

		getSingleChatLog() {
			this.$u.api.getSingleChatLog(this.options.user_id, 1, 20).then(res => {
				// const logList = res.data.log.data || [];
				let logList = (res.data.log.data || []).map(item => {
					item.username = item.from_name;
					item.avatar = item.from_avatar;
					item.id = item.from_id;
					item.type = 'friend';
					item.timestamp = item.timeline;
					item.is_recall = item.is_recall;
					// return new SingleMessageItem(item);
					return item;
				});
				if (this.messageManager.log(logList)) {
					this.logList = this.messageManager.messageDataList;
					this.scrollToBottom();
				}
			});
		},
		setRead() {
			this.$u.api.setChatSessionRead(this.options.user_id);
			getSingleSessionList();
		},
		getChatMessage(e) {
			if (e.data.to_id == this.options.user_id || e.data.from_id == this.options.user_id) {
				this.$u.throttle(this.setRead(), 1000);
				if (this.messageManager.log({ ...e.data, id: e.data.from_id, username: e.data.nickName })) {
					this.logList = this.messageManager.messageDataList;
					this.$nextTick(() => {
						// this.readLog();
						this.scrollToBottom();
					});
				}
			}
		},

		openLog() {
			this.navigateTo({
				url: '/pageChat/single/log?user_id=' + this.options.user_id
			});
		},

		sendMsgHandle(content) {
			const log = {
				username: this.userInfo.nickName,
				avatar: this.userInfo.avatar.file_path,
				id: this.userInfo.user_id,
				type: 'friend',
				content: Tools.html2Escape(content),
				timestamp: parseInt(moment().valueOf() / 1000)
			};
			if (this.messageManager.send(log, this.options.user_id)) {
				this.logList = this.messageManager.messageDataList;
				this.$nextTick(() => {
					// this.readLog();
					this.scrollToBottom();
				});
			}
		},
		onPress(data) {
			this.menuPos = { x: data.x, y: data.y };
			this.nonce_str = data.nonce_str;
			setTimeout(() => {
				this.$refs.chatPageContainer && this.$refs.chatPageContainer.showMenuPos();
			}, 0);
		},
		tapPopupItem(e) {
			this.$refs.chatPageContainer.hideMenuPos();
			uni.$emit('recallMessage', {
				data: { content: JSON.stringify({ nonce_str: this.nonce_str }) }
			});
			this.$u.api.doRevokeMsg(this.nonce_str).then(res => {});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ededed;
}
.slot-container {
	position: relative;
	width: 750rpx;
	flex: 1;
}
.chat-scroll {
	position: absolute;
	bottom: 0;
	top: 0;
}
.chat-log-list {
	padding-top: calc(44px + var(--status-bar-height));
}
</style>
